<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>论坛中文网</title>
</head>

<body>

	<!-- 顶部导航条 -->
	<nav class="navbar navbar-default">
		<div class="container-fluid">
		  <!-- Brand and toggle get grouped for better mobile display -->
		  <div class="navbar-header">
			<a class="navbar-brand" href="/">论坛中文网</a>
		  </div>
	  
		  <!-- Collect the nav links, forms, and other content for toggling -->
		  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
			  <li class="active"><a href="/">首页</a></li>
			  <li><a href="#">代码</a></li>
			  <li><a href="#">编程</a></li>
			</ul>
			<form class="navbar-form navbar-left" action="/">
			  <div class="form-group">
				<input type="text" class="form-control" placeholder="全站搜索">
			  </div>
			  <button type="button" class="btn btn-default">搜索</button>
			</form>
			<!-- 右侧功能按钮，根据登录状态分为两种 not-logined=未登录 logined=已登录 -->
			<ul class="nav navbar-nav navbar-right not-logined">
			  <li><a href="/html/login.html"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 登录</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right logined">
				<!-- 根据当前登录用户的权限，控制这些class的显示隐藏 -->
				<li class="permission ARTICLE_PUBLISH">
					<button type="button" class="btn btn-primary" style="margin-top: 8px; margin-left: 2px;"
						onclick="javascript: window.open('/html/article_publish.html', '_self');"
					>
						<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发布文章
					</button>
				</li>
				<li class="permission USER_ADMIN ARTICLE_ADMIN">
					<button type="button" class="btn btn-info" style="margin-top: 8px; margin-left: 2px;">
						<span class="glyphicon glyphicon-home" aria-hidden="true"></span> 进入管理后台
					</button>
				</li>
				<!-- 登录之后功能比较多，下拉菜单 -->
				<li class="dropdown">
				  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					<img id="nav_avatar" class="img-circle" style="width: 18px;">
					<!-- 放昵称，jquery改变这个元素的内容 -->
					<span id="currentUser_nickName"></span>
					<span class="caret"></span>
				  </a>
				  <ul class="dropdown-menu">
					<li><a href="javascript: window.location.replace('/html/userInfo.html');">个人信息</a></li>
					<li><a href="#">修改密码</a></li>
					<li role="separator" class="divider"></li>
					<li><a href="javascript: logout();">退出登录</a></li>
				  </ul>
				</li>
			  </ul>
		  </div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>

	<div style="padding: 10px; margin: 0px auto; max-width: 1600px;">
		<!-- 给这个div循环添加子标签就可以 -->
		<div id="articles">
		</div>
		<!-- 分页条 -->
		<div>
			<nav aria-label="...">
				<ul class="pagination">
					<!-- 上一页的按钮 -->
					<li id="preLi"><a href="javascript: pageOffset(-1)" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>					
					<!-- 下一页的按钮 -->
					<li><a href="javascript: pageOffset(1)" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
				</ul>
			</nav>
		</div>
	</div>

</body>

<!-- 引入jquery -->
<script src="/js/jquery/jquery-1.10.2.min.js"></script>
<!-- 引入bootstrap -->
<link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入main.js -->
<script src="/js/main.js"></script>

<script>

/**
 * 进入页面就会执行
 */
$(function() {
	// 获取当前登录用户，会currentUser赋值
	getCurrentUser().then(() => {
		if(currentUser==null) {
			// .. 没登陆的处理
			freshForNotLogined();
		}else {
			// ... 登录后的处理
			freshForLogined();
		}
	});
	// 进来之后就调用查询
	queryPage();
});

/**
 * 查询页面的数据，做后续的分页处理
 */
function queryPage() {
	// 查询所有文章
	listAllArticle().then((pageResult) => {
		// 生成分页条
		pageSize = pageResult.pageSize;
		pageNum = pageResult.pageNum;
		pageNumMax = Math.ceil(pageResult.total/pageResult.pageSize);// 总页数=总条数/每页size 向上取整
		// 循环添加页码
		$(".pageNum").remove();
		for(let num=pageNumMax; num>0; num--) {
			$("#preLi").after(
				`<li class="${pageNum==num?'active pageNum':'pageNum'}"><a href="javascript: pageTo(${num})">${num}</a></li>`
			);
		}
		// 然后循环添加数据
		$('#articles').html('');
		for(let data of pageResult.data) {
			$('#articles').append(
				`
				<div style='border-bottom: 1px solid #ccc; padding: 5px; margin: 5px;'>
					<div><h3>${data.title}</h3></div>
					<div style="height: 190px;">
						<div style='float: left;'>
							<img style="width: 240px; height: 170px; margin: 10px;" src='${BACK_URL + '/file' + data.img}' />	
						</div>
						<div style='float: left; padding: 10px;'>
							<span class="info">${data.desc}</span>	
						</div>
						<div style="clear: both;"></div>
					</div>
					<div>
						<p class="info">
							<span style="padding-right: 40px;">
								<span class="glyphicon glyphicon-user" aria-hidden="true"></span> ${data.creatorName}
							</span>
							<span style="padding-right: 10px;">
								<span class="glyphicon glyphicon-time" aria-hidden="true"></span> ${data.createTime}
							</span>
						</p>
					</div>
				</div>
				`
			);
		}
	});
}

let pageNum = 1, pageSize = 2, pageNumMax = 1;

/**
 * 查询所有文章
 */
function listAllArticle() {
	return new Promise((resolve, reject) => {
		$.ajax({
			url: BACK_URL + `/article/list?pageNum=${pageNum}&pageSize=${pageSize}`,
			method: "get",
			success:function (result) {
				if(result.code==200) {
					resolve(result.data);
				}else {
					reject();
				}
			}
		});
	});
}

/**
 * 跳转页面（绝对值，跳到特定页面）
 */
function pageTo(targetNum) {
	pageNum = targetNum;
	queryPage();
}

/**
 * 跳转到上一页和下一页
 */
function pageOffset(offset) {
	pageNum+=offset;
	pageNum = pageNum>pageNumMax? pageNumMax: pageNum;
	pageNum = pageNum<1? 1: pageNum;
	queryPage();
}

/**
 * 日期格式化
 * 传入时间，返回字符串
 */
function formatDateTime(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

</script>

<style>
/** 登录和未登录的元素默认全隐藏 */
.not-logined, .logined {
	display: none;
}

.navbar-right li {
	padding: 0px;
}

.info {
	color: #aaa;
}
</style>

</html>